<template>
	<div class="app-wrapper">
		<div class="layout-aside" :class="isCollapse?'collapse':''">
			<div class="layout-logo">
				<router-link to="/">
					<img v-show="!isCollapse" style="width:50px;height:auto" src="@/assets/logo.png" alt="logo"/>
                    <img v-show="isCollapse" style="width:44px;height:auto" src="@/assets/logo.png" alt="logo"/>
					<!-- <span v-show="!isCollapse">工业品超市管理后台</span> -->
				</router-link>
			</div>
			<SideBar :collapse="isCollapse" />
		</div>
		<div class="layout-container" :class="{collapse:isCollapse}">
			<div class="layout-header" :class="{collapse:isCollapse}">
				<Header />
			</div>
			<div class="layout-main">
				<AppMain />
			</div>
		</div>
	</div>
</template>
<script>
	import Header from "@/components/Header";
	import SideBar from "@/components/SideBar";
	import AppMain from "@/components/AppMain";
	export default{
		name:'layout',//此页面在router/index.js中对应的name
		components:{Header,SideBar,AppMain},
		computed:{
           isCollapse:function(){
                return this.$store.state.isCollapse;
            }
        },
		methods:{
			
		}
	}
</script>
<style lang="scss" scoped>
.app-wrapper{
	position:relative;
}
.layout-aside{
	position:fixed;
	left:0;
	top:0;
	height:100vh;
	width:210px;
	transition:all 0.3s;
	background-color:#fff;
	.layout-logo{
		height:60px;
		background-color:#ffffff;
		a{
			display:flex;
			width:100%;
			height:60px;
			justify-content:center;
			align-items:center;
		}
		img{
			width:100px;
			height:auto;
		}
	}
}
.layout-aside.collapse{
	width:64px;
}
.layout-container{
	margin-left:210px;
	height:100%;
	overflow:hidden;
}
.layout-container.collapse{
	margin-left:64px;
	transition:all 0.1s;
}
.layout-header{
	position:fixed;
	z-index:1;
	top:0;
	right:0;
	width:calc(100% - 210px);
	height:60px;
	box-shadow:0 1px 3px rgba(0,21,41,0.08);
	background-color:#fff;
}
.layout-header.collapse{
	width:calc(100% - 64px);
	transition:all 0.1s;
}
.layout-main{
	padding: 20px;
	min-height:calc(100vh - 150px);
	margin:70px 15px 10px 10px;
	background-color:#fff;
}
</style>

